<template>
  <div class="home-box">
    <el-container>
      <el-header>
        <!-- 头部 Header -->
        <Header></Header>
      </el-header>
      <el-container>
        <el-aside width="fit-content">
          <!-- 左侧菜单导航 Aside -->
          <!-- 父传子  defaultActive -->
          <Aside :defaultActive="defaultActive"></Aside>
        </el-aside>
        <el-main>
          <!-- 面包屑组件 -->
          <div class="bread-box">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
              <template v-if="targetRouteName">
                <el-breadcrumb-item :to="targetRoutePath">{{ targetRouteName }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ targetSubRouteName }}</el-breadcrumb-item>
              </template>
            </el-breadcrumb>
          </div>
          <!-- 右侧内容展示区域 二级路由出口 -->
          <div class="view">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
// 导入 子组件
import Header from '@/components/Header.vue';
import Aside from '@/components/Aside.vue';
import { useRoute } from 'vue-router';
import { ref, watch } from 'vue';

const route = useRoute();
// 菜单导航高亮  当路由地址发生变化时 需要修改 defaultActive
const defaultActive = ref('/index');
// 面包屑组件的数据   当路由地址发生变化时  也要改变面包屑的信息
const targetRoutePath = ref('/ums');
const targetRouteName = ref('权限');
const targetSubRouteName = ref('用户列表');

// 监听 路由地址
watch(
  () => route.path,
  (val) => {
    // console.log('watch监听到路由发生变化了...', val);
    // 1. 更新菜单导航的高亮
    defaultActive.value = val;
    // 2. 更新面包屑组件的信息
    targetRoutePath.value = route.meta.targetRoutePath as string;
    targetRouteName.value = route.meta.targetRouteName as string;
    targetSubRouteName.value = route.meta.targetSubRouteName as string;
  },
  {
    immediate: true,   // 立即监听
  }
)

</script>

<style scoped lang="less">
.home-box {

  // 头部容器 header
  .el-header {
    height: 70px;
    background-color: #409eff;
  }

  // 左侧 菜单导航容器 aside
  .el-aside {
    background-color: #304156;
    height: calc(100vh - 70px);

    &::-webkit-scrollbar {
      width: 0;
    }
  }

  // 右侧 内容展示容器 main
  .el-main {
    padding: 0;
    height: calc(100vh - 70px);
    background-color: #fff;

    .bread-box {
      width: 100%;
      padding: 15px 20px;
      background-color: #fff;
      margin-bottom: 10px;
      border-bottom: 2px solid #eee;
      position: fixed;
      z-index: 999;
    }

    .view {
      padding: 10px 20px;
      margin-top: 60px;
    }
  }
}
</style>